<!DOCTYPE HTML>
<html>
	<head>
		<title>please enter your title</title>
		<meta charset="utf-8">
		<meta name="Author" content="">
		<style type='text/css'>
			*{ margin:0; padding:0;}
			img{
				display:block;
				margin-bottom:20px;
			}
		</style>
	</head>
	<body>
		
		<img src="img/1.jpg" alt="" width="500" height="auto" />
		<img src="img/2.jpg" alt="" width="500" height="auto" />
		<img src="img/3.jpg" alt="" width="500" height="auto" />
		<img src="img/4.jpg" alt="" width="500" height="auto" />
		<img src="img/5.jpg" alt="" width="500" height="auto" />
		<img src="img/6.jpg" alt="" width="500" height="auto" />
		<img src="img/7.jpg" alt="" width="500" height="auto" />
		<img src="img/8.jpg" alt="" width="500" height="auto" />
		<img src="img/9.jpg" alt="" width="500" height="auto" />
		<img src="img/10.jpg" alt="" width="500" height="auto" />
		<img src="img/11.jpg" alt="" width="500" height="auto" />
		<img src="img/12.jpg" alt="" width="500" height="auto" />
		<img src="img/13.jpg" alt="" width="500" height="auto" />
		<img src="img/14.jpg" alt="" width="500" height="auto" />

		<script type="text/javascript">
			var oImg = document.getElementsByTagName('img');
			var length = oImg.length;

			for ( var i=0;i<length;i++ )
			{
				oImg[i].dataSrc = oImg[i].src;//把得到的自定义属性的值再赋值给真正的src
				oImg[i].src = 'img/loading.jpg';//一开始的页面用加载的图片显示出来
			}
			window.onload = function(){

				var arr = [];

				for ( var i=0;i<length;i++ )
				{
					arr[i] = oImg[i];
				}

				/*---刚开始打开时的页面不用加载，所以先显示--*/
				imgShow();
				window.onscroll = imgShow;
				
				function imgShow(){
					
					for ( var i=arr.length-1;i>=0;i-- )
					{
						var top = offsetTop( arr[i] );
						var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
						/*--元素到页面的距离小于滚动条的距离加上整个文档的距离--*/
						if ( top < ( scrollTop + winSize().height ) )
						{
							arr[i].src = arr[i].dataSrc;
							arr.slice( i,1 );
						}
					}

				};

				function offsetTop(obj){
					
					var top = 0;

					while ( obj != document.body )
					{
						top += obj.offsetTop;
						obj = obj.parentNode;
					};

					return top;

				};

				function winSize() { 
					var e = window,a = 'inner';
					if (!('innerWidth' in window )){ 
						a = 'client'; 
						e = document.documentElement || document.body; 
					};
					return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
				};

			};

		</script>
	</body>
</html>